import { useSelector } from "react-redux";
import { Button, Space } from "antd";
import {
  selectCount,
  increment as incrementActionCreator,
  incrementAsyncActionCreator,
} from "@/store/counterSlice";
import { useAppDispatch, useAppSelector } from "@/store/hook";
export default function Left() {
  const count = useSelector(selectCount);
  const dispatch = useAppDispatch();
  // 原
  // const doubleCount = useSelector((state: RootState) => state.counter.value * 2)
  const doubleCount = useAppSelector((state) => state.counter.value * 2);
  const increment = (payload?: number) => {
    dispatch(incrementActionCreator(payload));
  };
  const incrementAsync = () => {
    dispatch(incrementAsyncActionCreator(1))
  };
  return (
    <div>
      <h3>count： {count}</h3>
      <p>doubleCount: {doubleCount}</p>
      <Space direction="horizontal">
        <Button type="primary" onClick={() => increment()}>
          +1
        </Button>
        <Button type="primary" onClick={() => increment(3)}>
          +3
        </Button>
        <Button type="primary" onClick={incrementAsync}>
          异步自增+1
        </Button>
      </Space>
    </div>
  );
}
